<!--查看  接受  分配-->
<template>
<el-container>

    <el-aside width="200px">
        <MinisterMenu></MinisterMenu>
    </el-aside>

    <el-main style="padding:0px">
      <el-row>
        <el-col :span="8"><h2></h2></el-col>
      </el-row>


      <el-table :height="500" :row-class-name="tableRowClassName" border :data="projectList.filter(data=>!search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
        <el-table-column label="序号" type="index" />
        <el-table-column type="expand">
          <template #default="props">
            <p>项目名称: {{ props.row.name }}   </p>
            <p>项目详情: {{ props.row.details }}</p>
          </template>
        </el-table-column>
        <el-table-column :formatter="format"	 label="项目名称" prop="name" />
        <el-table-column label="发布时间" prop="pubTime" />
        <el-table-column label="开始时间" prop="startTime" />
        <el-table-column label="预计结束时间" prop="estTime" />
        <el-table-column align="right">
          <template #header>
            <el-input v-model="search" size="small" placeholder="Type to search" #default="scope" />
          </template>
          <template #default="scope">

            <el-button
                size="small"
                type="success"
                @click.prevent="handleAssign(scope.$index, scope.row)"
            >接收项目</el-button>
<!--   对话框                -->
<!--            <el-dialog @open="callBackOpen" @close="callBackClose" v-model="dialogFormVisible" title="部门任务分配" style="float: left" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
              <h2 style="float: left">部门名字：{{information.department.name}}</h2>
              <h2 >项目名称：{{this.currentProject.name}}</h2>-->
              <AssignTask :dialogFormVisible="this.dialogFormVisible" :currentProject="this.currentProject" :information="this.information" :nowHandleProjectId="this.nowHandleProjectId" :memberList="memberList"></AssignTask>
<!--              form
              <el-form :model="task" label-position="left" :rules="rules" ref="taskForm">
                <el-form-item label="任务名称" :label-width="formLabelWidth" prop="name">
                  <el-input v-model="task.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="任务详情" :label-width="formLabelWidth"  prop="details">
                  <el-input type="textarea" v-model="task.details" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="成员"  :label-width="formLabelWidth"  prop="companyUserId">
                  <el-select size="medium" v-model="task.companyUserId" placeholder="请选择一名部门成员">
                    <el-option
                        v-for="item in menberList"
                        :key="item.userinfo.id"
                        :label="item.userinfo.name"
                        :value="item.userinfo.id">
                      <span style="float: left">{{ item.userinfo.name }}</span>
                      <span style="float: right;color: var(&#45;&#45;el-text-color-secondary);
                        font-size: 13px; ">{{ item.userinfo.nickname }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开始时间"  :label-width="formLabelWidth" prop="startTime">
                  <div class="demo-datetime-picker">
                    <div class="block">
                      <el-date-picker
                          v-model="task.startTime"
                          type="datetime"
                          placeholder="Pick a Date"
                          format="YYYY/MM/DD HH:mm:ss"

                      />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="预计结束时间"  :label-width="formLabelWidth" prop="estTime">
                  <div class="demo-datetime-picker">
                    <div class="block">
                      <el-date-picker
                          v-model="task.estTime"
                          type="datetime"
                          placeholder="Pick a Date"
                          format="YYYY-MM-DD HH:mm:ss"

                      />
                    </div>
                  </div>
                </el-form-item>
              </el-form>-->

<!--            <template #footer>-->
<!--              <span class="dialog-footer">-->
<!--                <el-button @click="dialogFormVisible = false" type="warning">取消</el-button>-->
<!--&lt;!&ndash;                分配完成，列表中删除这条&ndash;&gt;-->
<!--                 <el-button type="success" @click="completeAssign" v-show="finishButton==false">分配完成</el-button>-->
<!--                <el-button type="primary" @click="keepSaveTask('taskForm')"-->
<!--                >添加(清空列表，继续分配)</el-button-->
<!--                >-->
<!--              </span>-->
<!--              </template>&ndash;&gt;-->
          </template>
        </el-table-column>
      </el-table>
<!--      对话框-->


      <el-row>
        <el-col :span="8" :offset="8">
          <el-pagination
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="pageNum"
              @next-click="nextClick"
              @prev-click="prevClick"
              @current-change="currentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-main>

</el-container>

</template>
<script>
import MinisterMenu from '@/components/menu/MinisterMenu.vue'
import Index from '@/components/Index.vue'
import instanceToken from "@/utlis/tokenIdentify";
import AssignTask from "@/components/minister/AssignTask";
import ManageLogin from "@/views/manage/ManageLogin";
export default {
    name: 'AcceptProjectView',
    components: {
        MinisterMenu,
        Index,
        AssignTask,
    },
  data(){
      return{
        projectList:[],
        search:'',
        pageSize:1,
        pageNum:1,
        total:0,
        ministerInfo:'',
        nowHandleProjectId:'',
        dialogFormVisible:false,
        information:'',
        memberList:[],
        currentProject:'',
        finishButton:true,

        rules: {
          name: [
            { required: true, message: '请输入任务名字', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          details: [
            { required: true, message: '请输入任务细节', trigger: 'blur' }
          ],
          companyUserId: [
            {  required: true, message: '选择接收人', trigger: 'change' }
          ],
          startTime: [
            { type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }
          ],
          estTime: [
            { type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }
          ],

        },

        task: {
          name: '',
          details: '',
          companyId:'',
          projectId:'',
          departmentId:'',
          pubId:'',
          companyUserId:'',
          subTime:'',
          startTime:'',
          estTime:'',
        },
        formLabelWidth: '120px'
        }
      }
  ,
  methods:{
/*    callBackOpen(){
          console.log("open回调");
        this.task.companyId=this.currentProject.companyId ;
        this.task.departmentId = this.currentProject.departmentId;
        this.task.projectId = this.currentProject.id;
        this.task.pubId = this.information.id;
        console.log(this.task)
        },
    callBackClose(){
        Object.keys(this.task).forEach(key => (this.task[key] = ''));
        this.$refs["taskForm"].resetFields();
        console.log("close回调")
      },
    keepSaveTask(taskForm) {
      // console.log(this.task)
      this.$refs[taskForm].validate((valid) => {
        if (valid) {
          instanceToken.post('project/minister/assignTask', this.task).then(res => {
            if (res.data.message = 'AllDone') {
              this.finishButton = false;
              Object.keys(this.task).forEach(key => (this.task[key] = ''));
              this.task.companyId = this.currentProject.companyId;
              this.task.departmentId = this.currentProject.departmentId;
              this.task.projectId = this.currentProject.id;
              this.task.pubId = this.information.id;
              this.$message({
                message: '分配成功',
                type: 'success'
              })
              this.$refs["taskForm"].clearValidate(['startTime']);
            }
          })
        }  else {
          this.$message.error('分配失败');
        }
      });
    },
    completeAssign(){
      // 分配完成；添加check表，表示部长已经查看：
      instanceToken.get("project/minister/acceptProject?projectId="+this.nowHandleProjectId).then(res=>{
        this.dialogFormVisible=false;

      })

    },*/
    handleAssign(index, row) {
      console.log(row);
      this.currentProject = row;
      this.dialogFormVisible=true;
      let projectId = row.id;
      console.log("pId"+projectId)
      this.nowHandleProjectId = projectId;
    },
    tableRowClassName({row, rowIndex}) {
      var date = new Date();
      // console.log(date.toLocaleDateString().split("/"));
      let today = date.toLocaleDateString();
      var startDates = today.split("/");
      var endDates = row.startTime.split("-");
      var startDate = new Date(startDates[0], startDates[1]-1 , startDates[2]);
      // console.log(startDate)
      var endDate = new Date(endDates[0], endDates[1]-1, endDates[2]);
      // console.log(endDate)
      //return parseInt(Math.abs(endDate - startDate) / 1000 / 60 / 60 / 24) + (isIncludeToday ? 1 : 0);//把相差的毫秒数转换为天数
      var days = (parseInt((endDate - startDate) / 1000 / 60 / 60 / 24));//把相差的毫秒数转换为天数
      // console.log(days);
      if(days>=0){
        return 'warning-row';
      }
      // console.log(row.name);
      // console.log(rowIndex);
    },
    format(row, column, cellValue, index){
      // console.log("---------------")
      // console.log(row);
      // console.log(column);
      // console.log(cellValue);
      // console.log(index);
      // return <span style="background-color: orange">{cellValue}</span>;
      return cellValue;
    },
    nextClick(){
      this.pageNum=+this.pageNum;
    },
    prevClick(){
      this.pageNum-=this.pageNum;
    },
    currentChange(val){
      this.pageNum = val;
      this.initData()
    },

    initData(){
      instanceToken.get("/project/minister/selectProject",{params:{
          pageSize:this.pageSize,
          pageNum:this.pageNum,
          companyUserId:window.sessionStorage.getItem("companyUserId")
        }}).then(res => {
          this.projectList = res.data.data.records;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
      });
      let ministerInfo = window.sessionStorage.getItem("loginUser")
    },
    //获取部长信息
    info(){
      this.information = JSON.parse(window.sessionStorage.getItem("companyUser"));

    },
    //获取人员信息
    getMemberlist(){
      instanceToken.get("project/minister/getMembers").then(res=>{
        this.memberList= res.data.data;
        console.log(this.memberList);
      })
    }
  },
  created() {
      this.initData();
      this.info();
      this.getMemberlist();
  }

}
</script>

<style>

.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
    height: 500px;
}
</style>

